<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
	<title></title>
	<link href="../../dist/css/lanai-ui.min.css" rel="stylesheet" />
</head>

<body>
	<section class="content no-padding">
		<div class="box box-widget no-shadow">
			<div class="box-body">
				<blockquote class="bg-gray-light blockquote-danger"><small>注意 : 验证采用bootstrap Validator，请自行官网下载。</small>
				</blockquote>
				<form role="form" id="form1">
					<h3>文本显示</h3>
					<div class="row">
						<div class="col-sm-3 border-right">
							<h1><code>h1</code>. Lanai</h1>
							<h2><code>h2</code>. Lanai</h2>
							<h3><code>h3</code>. Lanai</h3>
							<h4><code>h4</code>. Lanai</h4>
							<h5><code>h5</code>. Lanai</h5>
							<h6><code>h6</code>. Lanai</h6>
						</div>
						<div class="col-sm-3 border-right">
							<p class="lead">Lanai 强调文字加黑显示 <code>.lead</code></p>
							<p>以下使用样式<code>.text-*</code></p>
							<p class="text-green">Lanai 文本颜色 <code>.text-green</code></p>
							<p class="text-aqua">Lanai 文本颜色 <code>.text-aqua</code></p>
							<p class="text-light-blue">Lanai 文本颜色 <code>.text-light-blue</code></p>
							<p class="text-red">Lanai 文本颜色 <code>.text-red</code></p>
							<p class="text-yellow">Lanai 文本颜色 <code>.text-yellow</code></p>
							<p class="text-muted">Lanai 文本颜色 <code>.text-muted</code></p>
						</div>
						<div class="col-sm-3 border-right">
							<h5>圆角按钮</h5>
							<div class="form-group">
								<div class="input-group input-group-sm">
									<span class="label-control label-default">.label-control .label-default</span>
									<div class="input-group-btn">
										<button class="btn btn-default">.btn .btn-default</button>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<span class="label-control label-success"> .label-success</span>
									<div class="input-group-btn">
										<button class="btn btn-danger">.btn-danger</button>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-group-lg">
									<span class="label-control label-primary">.label-primary</span>
									<div class="input-group-btn">
										<button class="btn btn-success">.btn-success</button>
									</div>
								</div>
							</div>
							<h5>平角按钮</h5>
							<p><code>.no-radius</code>样式<br /><code>.no-raduis-childs</code>会去掉所有子元素的圆角设定</p>
							<div class="form-group">
								<div class="input-group">
									<span class="label-control label-default">.label-primary</span>
									<div class="input-group-btn">
										<button class="btn btn-success no-radius">.btn-success</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-3">
							<div class="row">
								<div class="col-sm-6">
									<p class="text-muted">简易SWITCH，复杂请用bootstrap-switch</p>
								</div>
								<div class="col-sm-6">									
										<div class="switch">
												<input type="checkbox" checked id="chek">
												<label for="chek">
													<span></span>
												</label>
											</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<code>.switch-primary</code>
									<div class="switch switch-primary">
										<input type="checkbox" checked id="chek1">
										<label for="chek1">
											<span></span>
										</label>
									</div>
								</div>
								<div class="col-sm-6"><code>.switch-info</code>
									<div class="switch switch-info">
										<input type="checkbox" checked id="chek9">
										<label for="chek9">
											<span></span>
										</label>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<code>.switch-success</code>
									<div class="switch switch-success">
										<input type="checkbox" checked id="chek2">
										<label for="chek2">
											<span></span>
										</label>
									</div>
								</div>
								<div class="col-sm-6">
										<code>.switch-lg </code>
									<div class="switch switch-lg  switch-success">
										<input type="checkbox" checked id="chek21">
										<label for="chek21">
											<span></span>
										</label>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<code>.switch-warning</code>
									<div class="switch switch-warning">
										<input type="checkbox" checked id="chek3">
										<label for="chek3">
											<span></span>
										</label>
									</div>
								</div>
								<div class="col-sm-6">
									<code>.switch-sm </code>
									<div class="switch switch-sm switch-success">
										<input type="checkbox" checked id="chek22">
										<label for="chek22">
											<span></span>
										</label>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<code>.switch-danger</code>
									<div class="switch switch-danger">
										<input type="checkbox" checked id="chek4">
										<label for="chek4">
											<span></span>
										</label>
									</div>
								</div>
								<div class="col-sm-6">
										<code>.switch-xs </code>
									<div class="switch switch-xs  switch-success">
										<input type="checkbox" checked id="chek23">
										<label for="chek23">
											<span></span>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<h3>简单输入框<code>.form-control</code></h3>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label for="demo-lg">超大输入框<code>.input-lg</code></label>
								<input type="text" class="form-control input-lg" id="demo-lg" placeholder="请输入内容...">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label for="demo-default">默认输入框</label>
								<input type="text" class="form-control" id="demo-default" placeholder="请输入内容...">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label for="demo-sm">超小输入框<code>.input-sm</code></label>
								<input type="text" class="form-control input-sm" id="demo-sm" placeholder="请输入内容...">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label for="demo-disabled">禁用输入框<code>disabled</code>属性</label>
								<input type="text" class="form-control" id="demo-disabled" placeholder="请输入内容 ..."
									disabled="">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label for="demo-password">密码输入框（必填项)</label>
								<input type="password" class="form-control" id="demo-password" name="demopassword"
									placeholder="请输入密码 ...">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label for="demo-select">普通下拉表</label>
								<select class="form-control" id="demo-select">
									<option>Java</option>
									<option>C#</option>
									<option>PHP</option>
								</select>
							</div>
						</div>
					</div>
					<h3>多选&单选</h3>
					<div class="row">
						<div class="col-sm-12">
							<div class="form-group">
								<div class="checkbox checkbox-inline">
									<input id="checkbox1" type="checkbox" checked>
									<label for="checkbox1">
										默认样式
									</label>
								</div>
								<div class="checkbox checkbox-inline checkbox-primary">
									<input id="checkbox2" type="checkbox" checked>
									<label for="checkbox2">
										常用<code>.checkbox-primary</code>
									</label>
								</div>
								<div class="checkbox checkbox-inline checkbox-success">
									<input id="checkbox3" type="checkbox" checked>
									<label for="checkbox3">
										成功<code>.checkbox-success</code>
									</label>
								</div>
								<div class="checkbox checkbox-inline checkbox-info">
									<input id="checkbox4" type="checkbox" checked>
									<label for="checkbox4">
										提醒<code>.checkbox-info</code>
									</label>
								</div>
								<div class="checkbox checkbox-inline checkbox-warning">
									<input id="checkbox5" type="checkbox" checked>
									<label for="checkbox5">
										警示<code>.checkbox-warning</code>
									</label>
								</div>
								<div class="checkbox checkbox-inline checkbox-danger">
									<input id="checkbox6" type="checkbox" checked>
									<label for="checkbox6">
										危险<code>.checkbox-danger</code>
									</label>
								</div>
								<div class="checkbox checkbox-inline">
									<input id="checkbox7" type="checkbox" disabled>
									<label for="checkbox7">
										禁用(以上样式通用)
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="radio radio-inline">
								<input type="radio" name="radio1" id="radio1" value="option1" checked>
								<label for="radio1">
									默认
								</label>
							</div>
							<div class="radio radio-inline radio-primary">
								<input type="radio" name="radio1" id="radio2" value="option2">
								<label for="radio2">
									常用<code>.radio-primary</code>
								</label>
							</div>
							<div class="radio radio-inline radio-success">
								<input type="radio" name="radio1" id="radio3" value="option3">
								<label for="radio3">
									绿色<code>.radio-success</code>
								</label>
							</div>
							<div class="radio radio-inline radio-info">
								<input type="radio" name="radio1" id="radio5" value="option5">
								<label for="radio5">
									提醒<code>.radio-info</code>
								</label>
							</div>
							<div class="radio radio-inline radio-warning">
								<input type="radio" name="radio1" id="radio6" value="option6">
								<label for="radio6">
									警示<code>.radio-warning</code>
								</label>
							</div>
							<div class="radio radio-inline radio-danger">
								<input type="radio" name="radio1" id="radio4" value="option4">
								<label for="radio4">
									危险<code>.radio-danger</code>
								</label>
							</div>
							<div class="radio radio-inline">
								<input type="radio" name="radio1" id="radio7" value="option7" disabled>
								<label for="radio7">
									禁用(以上样式通用)
								</label>
							</div>
						</div>
					</div>
					<h3>方框风格&图标<code>.input-group</code></h3>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">姓名</span>
									<input type="text" class="form-control" id="demo-nm" placeholder="请输入您的姓名...">
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-language"></i></span>
									<select class="form-control" id="demo-select-icons">
										<option>Java</option>
										<option>C#</option>
										<option>PHP</option>
									</select>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<input type="email" class="form-control" placeholder="请输入您的gmail邮箱"
										id="demo-user-email">
									<span class="input-group-addon">@gmail.com</span>
								</div>
							</div>
						</div>
					</div>

					<h3>日期和时间选择</h3>
					<p><a href="http://www.bootcss.com/p/bootstrap-datetimepicker/"
							target="_blank">访问官网</a>:集成脚本bootstrap-datepicker,使用<code>obj.datetimepicker({});</code>
					</p>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">日期选择</span>
									<input type="text" class="form-control" id="demo-date" placeholder="请选择日期..">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								</div>
							</div>
						</div>

						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">日期&时间选择</span>
									<input type="text" class="form-control" id="demo-datetime" placeholder="请选择日期..">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">月份选择</span>
									<input type="text" class="form-control" id="demo-date-span" placeholder="请选择月份..">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								</div>
							</div>
						</div>
					</div>
					<h3>带按钮的输入框(尺寸从大到小)</h3>
					<div class="row">
						<div class="col-sm-4">
							<p><code>.input-group-lg</code></p>
							<div class="input-group input-group-lg">
								<div class="input-group-btn">
									<button type="button" class="btn btn-warning no-radius dropdown-toggle"
										data-toggle="dropdown">
										北京市
										<span class="fa fa-caret-down"></span>
									</button>
									<ul class="dropdown-menu">
										<li><a href="#">上海市</a></li>
										<li><a href="#">天津市</a></li>
										<li><a href="#">西安市</a></li>
										<li class="divider"></li>
										<li><a href="#">其他城市</a></li>
									</ul>
								</div>
								<!-- /btn-group -->
								<input type="text" class="form-control no-radius" placeholder="请输入街道名称">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="input-group">
								<div class="input-group-btn">
									<button type="button" class="btn btn-primary no-radius"><i
											class="fa fa-search"></i></button>
								</div>
								<!-- /btn-group -->
								<input type="text" class="form-control no-radius">
							</div>
						</div>
						<div class="col-sm-4">
							<p><code>.input-group-sm</code></p>
							<div class="input-group input-group-sm">
								<input type="text" class="form-control no-radius">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default no-radius"><i
											class="fa fa-ellipsis-h"></i></button>
								</div>
								<!-- /btn-group -->
							</div>
						</div>
					</div>
					<h3>文本域</h3>
					<div class="row">
						<div class="col-sm-12">
							<textarea class="form-control" rows="3" placeholder="请输入内容 ..."></textarea>
						</div>
					</div>
					<h3>文件或图片上传</h3>
					<p><a href="https://github.com/kartik-v/bootstrap-fileinput"
							target="_blank">访问官网</a>:集成bootstrap-fileinput,使用<code>obj.fileinput({})</code></p>
					<div class="row">
						<div class="col-sm-12">
							<div class="form-group">
								<input id="file-haspreview-noradius" type="file" multiple class="file"
									data-overwrite-initial="false" data-min-file-count="2">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<input id="file-no-preview-simple" type="file" class="file">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-image"></i></span>
									<input id="file-no-preview-img" type="file" class="file">
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<input id="file-no-preview-onlybtn" type="file" class="file">
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
	<script src="../../dist/js/jquery.min.js"></script>
	<script src="../../dist/js/lanai-ui.min.js"></script>
	<script src="../../dist/plugins/validator/validator.js"></script>
	<script type="text/javascript">
		$("#file-haspreview-noradius").fileinput({
			noRadius: true,
			showPreview: true,
			showUpload: false,
			showCaption: true,
			uploadUrl: '#', // you must set a valid URL here else you will get an error
			allowedFileExtensions: ['jpg', 'png', 'gif'],
			overwriteInitial: false,
			maxFileSize: 1000,
			maxFilesNum: 10,
			slugCallback: function (filename) {
				return filename.replace('(', '_').replace(']', '_');
			}
		});
		$("#file-no-preview-simple").fileinput({
			showPreview: false,
			showUpload: false,
			showCaption: true,
			browseClass: 'btn btn-default'
		});
		$("#file-no-preview-img").fileinput({
			noRadius: true,
			showPreview: false
		});
		$("#file-no-preview-onlybtn").fileinput({
			showPreview: false,
			showUpload: false,
			showCaption: false,
			browseClass: 'btn btn-danger'
		});

		$(function () {
			$("#demo-date").datetimepicker({
				format: 'yyyy-mm-dd',//显示格式
				todayHighlight: 1,//今天高亮
				minView: "month",//设置只显示到月份
				startView: 2,
				forceParse: 0,
				showMeridian: 1,
				autoclose: 1//选择后自动关闭
			});//日期选择
			$("#demo-datetime").datetimepicker({
				format: 'yyyy-mm-dd HH:ii',//显示格式
				todayHighlight: 1,//今天高亮
				startView: 1,
				forceParse: 0,
				showMeridian: 1,
				autoclose: 1//选择后自动关闭
			});
			$("#demo-date-span").datetimepicker({
				format: 'mm',//显示格式
				startView: 3,
			});


			$("#form1").bootstrapValidator({
				fields: {
					demopassword: {/*键名username和input name值对应*/
						message: '密码不能为空',
						validators: {
							notEmpty: {/*非空提示*/
								message: '请输入密码'
							}
						}
					}
				}
			});
		});
	</script>
</body>

</html>